<template>
  <view class="menu-item" @click="$emit('click')">
    <img class="menu-item__icon" :src="src" alt="" />
    <text class="menu-item__title">{{ title }}</text>
  </view>
</template>

<script>
  export default {
    props: {
      src: {
        type: String,
        default: undefined
      },
      title: {
        type: String,
        default: ''
      }
    }
  };
</script>

<style scoped lang="less">
  .menu-item {
    display: inline-block;
    width: 25%;
    padding: 32px 8px 0;
    text-align: center;
    vertical-align: top;

    &:nth-child(-n + 4) {
      padding-top: 16px;
    }

    &__icon {
      display: inline-block;
      width: 60px;
      height: 60px;
      vertical-align: top;
      object-fit: cover;
    }

    &__title {
      margin-top: 8px;
      font-size: 14px;
      line-height: 20px;
    }
  }
</style>
